<template>
  <!-- 五角星评价组件 -->
  <div class="star" :class="starType">
    <span class="icon" :class="star" v-for="(star, index) in classMap" :key="index"></span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        line: 5, // 星的个数
        starOn: 'on', // 全星
        starOff: 'off', // 空星
        starHalf: 'half' // 半星
      }
    },
    props: { // 正向传值
      score: { // 评价分数 4.3
        type: Number,
        required: true
      },
      size: { // 星的大小
        type: Number,
        default: '24'
      }
    },
    computed: {
      starType() {
        return 'star-' + this.size
      },
      classMap() {
        let result = []
        let score = Math.floor(this.score * 2) / 2 // 4.2 * 2 = 8.4 -> 8 / 2 -> 4  4.3 * 2 = 8.6 -> 8 / 2 -> 4
        for (var i = 1; i <= this.line; i++) {
          if (i <= score) { // 全星
            result.push('on')
          } else if (i === score && i < this.score) { // 4.5 // 半星
            result.push('half')
          } else { // 空星
            result.push('off')
          }
        }
        // return ['on', 'on', 'half', 'off', 'off']
        return result
      }
    }
  }
</script>

<style lang="sass" scoped>
.star
  display: inline-block
  font-size: 0
  text-align: center
  .icon
    display: inline-block
  &.star-24
    .icon
      width: 24rpx
      height: 24rpx
      margin-right: 3rpx
      &.on
        background: url('../../static/images/star24_on@3x.png') no-repeat
        background-size: 24rpx auto
      &.off
        background: url('../../static/images/star24_off@3x.png') no-repeat
        background-size: 24rpx auto
      &.half
        background: url('../../static/images/star24_half@3x.png') no-repeat
        background-size: 24rpx auto
  &.star-36
    .icon
      width: 36rpx
      height: 36rpx
      margin-right: 4rpx
      &.on
        background: url('../../static/images/star36_on@3x.png') no-repeat
        background-size: 36rpx auto
      &.off
        background: url('../../static/images/star36_off@3x.png') no-repeat
        background-size: 36rpx auto
      &.half
        background: url('../../static/images/star36_half@3x.png') no-repeat
        background-size: 36rpx auto
  &.star-48
    .icon
      width: 48rpx
      height: 48rpx
      margin-right: 42rpx
      &.on
        background: url('../../static/images/star48_on@3x.png') no-repeat
        background-size: 48rpx auto
      &.off
        background: url('../../static/images/star48_off@3x.png') no-repeat
        background-size: 48rpx auto
      &.half
        background: url('../../static/images/star48_half@3x.png') no-repeat
        background-size: 48rpx auto
</style>